*{box-sizing:border-box;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif}
body{background:#f2f3f5;color:#222;margin:0;padding:0;min-height:100vh}
#app.miniapp{max-width:420px;margin:0 auto;background:#f2f3f5;min-height:100vh;padding-bottom:64px}
.mini-topbar{height:44px;background:#ffffff;border-bottom:1px solid #e9eef7;display:flex;align-items:center;padding:0 10px;position:sticky;top:0;z-index:20}
.mini-topbar .mini-icon{border:none;background:transparent;font-size:20px;padding:6px 8px}
.mini-topbar .mini-title{flex:1;text-align:center;font-weight:700}
.mini-sub{padding:8px 12px;color:#888;font-size:12px}
.mini-actions{display:flex;gap:8px;padding:8px 12px}
.mini-btn{flex:1;padding:8px 10px;border-radius:8px;border:1px solid #e6e9ef;background:#fff;font-size:13px}
.hero-search{display:flex;gap:8px;padding:8px 12px}
.hero-search input{flex:1;padding:8px;border-radius:8px;border:1px solid #e6e9ef}
.hero-search button{padding:8px 12px;border-radius:8px;border:1px solid #e6e9ef;background:#2d8cf0;color:#fff}
.mini-main{padding:8px 12px}
.card{background:#fff;border-radius:10px;padding:12px;margin-bottom:12px;border:1px solid #e6e9ef}
.card h2{margin:0 0 8px 0;font-size:16px}
#recentRoomsList{list-style:none;padding:0;margin:0}
#recentRoomsList li{padding:12px;border-bottom:1px solid #f6f6f8;display:flex;justify-content:space-between;align-items:center}
.room-id{font-weight:700}
.room-meta{color:#999;font-size:13px}
.room-actions button{margin-left:6px;padding:4px 10px;border-radius:6px;border:1px solid #e6e9ef;background:#fff;font-size:12px;cursor:pointer}
.room-actions button:hover{background:#f5f6f8}
.room-actions .deleteRoomBtn{color:#e74c3c}
.room-actions .deleteRoomBtn:hover{background:#fee;border-color:#e74c3c}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.hero-card{border:1px dashed #eee;padding:8px;border-radius:8px;text-align:center;position:relative;background:#fafafa}
.hero-card img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.identity-select{position:static;margin-top:6px;background:rgba(255,255,255,0.95);padding:6px;border-radius:6px;border:1px solid #eee;font-size:13px;text-align:center}
.hero-card .small{color:#222;font-weight:700;margin-top:6px}
.hero-card .name-input{margin-top:8px}
.hero-card .name-input input{width:100%;padding:6px;border-radius:6px;border:1px solid #eee;font-size:13px;text-align:center}
.hero-card img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.progress{height:10px;background:#f2f3f5;border-radius:8px;overflow:hidden}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);width:0}
.user-list{display:flex;gap:8px;flex-wrap:wrap}
.user-item{display:flex;flex-direction:column;align-items:center;width:64px}
.user-item img{width:48px;height:48px;border-radius:50%}
.controls{margin-top:8px}
.controls input, .controls select{padding:8px;border-radius:8px;border:1px solid #eee}
.small{font-size:13px;color:#666}
.result-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f6f6f8}
.center{display:flex;justify-content:center;align-items:center}
.hidden{display:none}

/* modal */
.modal{position:fixed;left:0;top:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);z-index:60}
.modal .modal-content{background:#fff;padding:16px;border-radius:8px;min-width:260px;max-width:90%;box-shadow:0 10px 30px rgba(0,0,0,0.12)}
.modal .modal-content label{display:block;margin-bottom:8px}
.modal .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

/* show modal when it does NOT have .hidden */
.modal:not(.hidden){display:flex}

/* 每个武将卡片下的搜索框 */
.hero-card .hero-search-input{margin-top:6px}
.hero-card .hero-search-input input{width:100%;padding:6px;border-radius:6px;border:1px solid #eee;font-size:13px}

/* 用户选择面板样式 */
.user-choices-panel{border:1px solid #e6e9ef;border-radius:8px;padding:8px;margin-top:12px;background:#fff;position:relative}
.user-choices-panel .panel-header{display:flex;justify-content:space-between;align-items:center}
.user-choices-panel .panel-header h4{margin:0}
.panel-controls{display:flex;gap:6px}
.panel-controls button{background:#f5f6f8;border:1px solid #ddd;padding:4px 8px;border-radius:6px;cursor:pointer}
.user-choices-collapsed .result-row{display:none}
.highlight{box-shadow:0 0 0 3px rgba(76,175,80,0.12);transition:box-shadow 0.3s}

/* 底部 tabbar */
.mini-tabbar{position:fixed;left:0;right:0;bottom:0;height:54px;background:#fff;border-top:1px solid #e9eef7;display:flex;justify-content:space-around;align-items:center;z-index:30}
.mini-tabbar .tab-item{background:transparent;border:none;padding:6px 8px;border-radius:6px;font-size:13px;color:#666}
.mini-tabbar .tab-item.active{color:#2d8cf0;font-weight:700}

@media(min-width:720px){
	#app.miniapp{max-width:980px}
}

/* 历史记录样式 */
.history-rooms-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.history-room-item{background:#fff;border:1px solid #e6e9ef;border-radius:8px;padding:12px;display:flex;justify-content:space-between;align-items:center}
.history-room-info{flex:1}
.history-room-info .room-id{font-weight:700;font-size:15px;margin-bottom:4px}
.history-room-info .room-meta{font-size:13px;color:#666;margin-bottom:2px}
.history-room-item .room-actions{display:flex;gap:6px}
.history-room-item .room-actions button{padding:6px 12px;border-radius:6px;border:1px solid #e6e9ef;background:#fff;font-size:13px;cursor:pointer}
.history-room-item .room-actions button:hover{background:#f5f6f8}
.history-room-item .deleteRoomBtn{color:#e74c3c}
.history-room-item .deleteRoomBtn:hover{background:#fee;border-color:#e74c3c}
